<style lang="less" scoped>
    @import '../../styles/common.less';
    @import '../../styles/loading.less';
    @import 'training.less';
</style>
<script src="./training.js"></script>

<template>
    <div>
        <Row style="font-size: 15px;">

            培训班名：<Input v-model="queryCon.activityName" clearable style="width: 15%"></Input>
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
        </Row>
        <Row>
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList" show-total show-elevator></Page>
        </div>
        <Modal
                v-model="viewModalVisible"
                title="培训信息"
                @on-ok="viewModalVisible = false"
                @on-cancel="viewModalVisible = false"
                width="65%">
            <Form :model="formData" :label-width="90">
                <Row>
                    <Col span="12">
                    <FormItem label="培训班名">
                        <div class="conts">{{formData.name}}</div>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="招生人数">
                        <div class="conts">{{formData.applynums}}</div>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                    <FormItem label="培训地点">
                        <div class="conts">{{formData.address}}</div>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="报名截止时间">
                        <div class="conts">{{formData.applyendtime1}}</div>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                    <FormItem label="培训时间">
                        <div class="conts">{{formData.departtime}}</div>
                    </FormItem>
                    </Col>
                </Row>
                <FormItem label="简介">
                    <div class="conts" v-html="formData.intro">{{formData.intro}}</div>
                </FormItem>
                <FormItem label="费用说明">
                    <div class="conts" v-html="formData.cost">{{formData.cost}}</div>
                </FormItem>

            </Form>
        </Modal>
        <Modal v-model="saveModalVisible" :title="(formData.id ? '修改' : '新增') + '培训'" width="65%" @on-cancel="destroyed">
            <Form :model="formData" :label-width="125">
                <Row>
                    <Col span="12">
                    <FormItem label="培训班名">
                        <Input v-model="formData.name" clearable ></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="招生人数">
                        <Input v-model="formData.applynums" clearable ></Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row>

                    <Col span="12">
                    <FormItem label="报名截止时间">
                        <DatePicker type="date" v-model="formData.applyendtime" @on-change="formData.applyendtime=$event"></DatePicker>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="活动地点">
                        <Input v-model="formData.address" clearable ></Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <FormItem label="培训时间">
                        <Col span="6" v-for="item in timeList">
                             <DatePicker type="date" v-model="item.value" @on-change="item.value=$event"></DatePicker>
                        </Col>
                        <Button type="primary" shape="circle" icon="plus" @click="addTime"></Button>
                        <Button type="primary" shape="circle" icon="minus" @click="delTime"></Button>
                    </FormItem>
                </Row>
                <FormItem label="简介">
					<UEditor id="training_intro" :config=config ref="training_intro"></UEditor>
                </FormItem>
                <FormItem label="费用说明">
					<UEditor id="training_cost" :config=config ref="training_cost"></UEditor>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="activitySave">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="destroyed">取消</Button>
            </div>
        </Modal>
        <Modal v-model="priceModalVisible" title="价格设置" width="50%"  @on-cancel="priceCancel">
            <Form :model="formData" :label-width="70">
                <Row v-for="(item,index) in priceList">
                    <Col span="7">
                        <FormItem label="类目名称">
                            <Input v-model="item.name" clearable ></Input>
                        </FormItem>
                    </Col>
                    <Col span="7">
                    <FormItem label="类目费用">
                        <InputNumber v-model="item.money" :min="0" style="width:100%"></InputNumber>
                    </FormItem>
                    </Col>
                    <Col span="7">
                    <FormItem label="类目人数">
                        <InputNumber v-model="item.peoplenums" :min="0" style="width:100%"></InputNumber>
                    </FormItem>
                    </Col>
                    <Col span="3" v-if="index+1==(priceList.length)">
                        <Button type="primary" shape="circle" icon="plus" @click="addPrice"></Button>
                        <Button type="primary" shape="circle" icon="minus" @click="delPrice"></Button>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="priceSave">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="priceCancel">取消</Button>
            </div>
        </Modal>
    </div>
</template>

